<template>
    <div>
        <!-- 返回 -->
        <el-card shadow="never" class="!border-none">
            <el-page-header @back="emits('listen', 'lists', 0)">
                <template #content>
                    <div class="flex items-center">
                        <el-avatar class="mr-3" :size="32" :src="know.logo"/>
                        <span class="text-large font-600 mr-3"> {{ know?.name }} </span>
                        <el-tag type="info">文档管理页面</el-tag>
                    </div>
                </template>
            </el-page-header>
        </el-card>

        <!-- 表格栏 -->
        <el-card v-loading="pager.loading" shadow="never" class="!border-none mt-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <el-button :icon="Refresh">刷新数据</el-button>
                    <el-button
                        :disabled="tableRef?.getSelectionRows().length == 0"
                        :icon="Delete"
                        type="danger"
                        plain
                        @click="batchDelete"
                    >批量删除</el-button>
                </div>
                <div class="flex items-center">
                    <el-input
                        v-model="queryParams.keyword"
                        class="h-[40px]"
                        size="large"
                        placeholder="关键词"
                    />
                    <el-button
                        class="ml-3 h-9"
                        type="primary"
                        :icon="Search"
                        @click="resetPaging"
                    >搜索</el-button>
                </div>
            </div>

            <el-table
                ref="tableRef"
                v-loading="pager.loading"
                :data="pager.lists"
                size="large"
                class="mt-4"
            >
                <el-table-column type="selection" width="55" />
                <el-table-column label="文档名称" prop="name" min-width="150" show-tooltip-when-overflow />
                <el-table-column label="所属知识库" prop="know" min-width="150">
                    <template #default="{ row }">
                        <el-tag type="info">{{ row?.know }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="数据总量" prop="train_total" min-width="100" />
                <el-table-column label="学习成功" prop="train_total" min-width="100" />
                <el-table-column label="等待学习" prop="train_yes" min-width="100" />
                <el-table-column label="更新时间" prop="update_time" min-width="180" />
                <el-table-column label="操作" width="140" fixed="right">
                    <template #default="{ row }">
                        <el-button
                            v-perms="['agent:robot:detail']"
                            type="primary"
                            link
                            @click="handlePopup('dataset', row)"
                        >
                            数据管理
                        </el-button>
                        <el-button
                            v-perms="['agent:robot:delete']"
                            type="danger"
                            link
                            @click="handleDelete(row.id)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <paging v-model="pager" @change="queryLists" />
            </div>
        </el-card>

        <!-- 数据弹窗 -->
        <pop-data-list v-if="datasetShow" ref="datasetRef" @close="datasetShow = false" />
    </div>
</template>

<script setup lang="ts">
import type { ElTable } from 'element-plus'
import { Search, Refresh, Delete } from '@element-plus/icons-vue'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import knowArchiveApi from '@/api/agent/know/archive'
import PopDataList from './_pop_data_list.vue'

const emits = defineEmits(['listen'])
const prop = defineProps({
    know: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

// 数据弹窗
const datasetShow = ref(false)
const datasetRef = shallowRef<InstanceType<typeof PopDataList>>()

// 表格引用
const tableRef = ref<InstanceType<typeof ElTable>>()

// 查询参数
const queryParams = reactive({
    know_id: prop.know.id,
    keyword: '',
    is_disable: ''
})

// 分页查询
const { pager, queryLists, resetPaging } = usePaging({
    fetchFun: knowArchiveApi.lists,
    params: queryParams
})

/**
 * 处理弹窗
 *
 * @param {string} type
 * @param {any} row
 * @returns {Promise<void>}
 */
const handlePopup = async (type: string, row?: any): Promise<void> => {
    if (type === 'dataset') {
        datasetShow.value = true
        await nextTick()
        datasetRef.value?.open(type, row)
    }
}

/**
 * 处理删除
 *
 * @param {number} id
 * @returns {Promise<void>}
 * @author zero
 */
const handleDelete = async (id: number): Promise<void> => {
    feedback.confirm('确定要删除此项数据吗?')
        .then(async () => {
            await knowArchiveApi.delete([id])
            feedback.msgSuccess('删除成功')
            await queryLists()
        }).catch(() => {})
}

/**
 * 批量删除
 *
 * @returns {Promise<void>}
 * @author zero
 */
const batchDelete = async (): Promise<void> => {
    const ids = tableRef.value?.getSelectionRows().map((item: any) => item.id)
    if (ids.length <= 0) {
        return feedback.msgError('请选择要删除的数据')
    }

    feedback.confirm('确定要删除此项数据吗?')
        .then(async () => {
            await knowArchiveApi.delete(ids)
            feedback.msgSuccess('删除成功')
            await queryLists()
        }).catch(() => {})
}

watch(prop.know, async (val) => {
    if (val) {
        await queryLists()
    }
}, {immediate: true})
</script>